<template>
    <div class="infowrap3">
        <el-dialog
            v-model="dialogVisible"
            
            title="新增种植"
            width="570px"
            custom-class="diyclass"
        >
            <div class="mcontent">
            <div class="mchild">
                <div class="label">
                种植种类:
                </div>

                <el-select @change="cateChangeHandle" 
                  v-model="form.value.cropsCategoryId"
                  class="m-2" placeholder="请选择" size="default">
                  <el-option
                    v-for="item in cropsCategoryOptions.value"
                    :key="item.id"
                    :label="item.categoryName"
                    :value="item.id"
                  />
              </el-select>
            </div> 
            <div class="mchild">
                <div class="label">
                种植品种:
                </div>
                
                <el-select v-model="form.value.cropsSubclassId" class="m-2" placeholder="请选择" size="default">
                  <el-option
                    v-for="item in cropsSubclassOptions.value"
                    :key="item.id"
                    :label="item.cropsSubclassName"
                    :value="item.id"
                  />
                </el-select>
            </div>
            <div class="mchild">
                <div class="label">
                种植密度:
                </div>
                <div class="dydiv2">
                  <el-input type="number" v-model="form.value.density" placeholder="请输入" clearable >
                    
                    <template #append>株/亩</template>
                  </el-input>
                </div>
               
            </div>
            <div class="mchild">
                <div class="label">
                种植地块:
                </div>
                <el-select v-if="plotOptionList.value.length==0" v-model="form.value.plotId" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in getPlotList"
                    :key="item.id"
                    :label="item.plotName"
                    :value="item.id"
                    />
                </el-select>
                <el-input  
                v-else
                disabled
                v-model="plotOptionList.value[0]['plotName']"
                placeholder="请输入"  ></el-input>
            </div>
            <div class="mchild" v-if="cropFlag">
                <div class="label">
                品种特性:
                </div>
                <el-select  multiple v-model="form.value.specialityArr" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in specialityOption.value"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                    />
                </el-select>
            </div>
            <div class="mchild" v-if="cropFlag">
                <div class="label">
                种植用途:
                </div>
                <el-select
                  v-if="cropFlag==true"
                v-model="form.value.purpose" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in cropUseOption"
                    :key="item"
                    :label="item"
                    :value="item"
                    />
                </el-select>
                <el-input  
                v-else
                v-model="form.value.purpose"
                 placeholder="请输入" clearable ></el-input>
            </div>
            <div class="mchild" v-if="cropFlag">
                <div class="label">
                成熟期:
                </div>
                <el-select v-model="form.value.maturationStage" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in maturationOptionList"
                    :key="item"
                    :label="item"
                    :value="item"
                    />
                </el-select>
            </div>
            <div class="mchild" v-if="cropFlag">
                <div class="label">
                栽培模式:
                </div>
                <el-select v-model="form.value.cultivationPattern" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in modeOption"
                    :key="item"
                    :label="item"
                    :value="item"
                    />
                </el-select>
            </div>
            <div class="mchild">
                <div class="label">
                种植行距:
                </div>
                <el-select v-model="form.value.rowledge" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in rankOption"
                    :key="item"
                    :label="item"
                    :value="item"
                    /> 
                </el-select>
            </div>
            <div class="mchild planttime">
                <div class="label">
                播种时间:
                </div>
                <el-date-picker
                  v-model="form.value.sowingTime"
                  type="date"
                  placeholder="请选择时间"
                />
               
            </div>
            <div class="mchild" v-if="cropFlag">
                <div class="label">
                灌溉方式:
                </div>
                <el-select v-model="form.value.irrigationRegime" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in irrigationOption"
                    :key="item"
                    :label="item"
                    :value="item"
                    />
                </el-select>
            </div>
            <div class="mchild">
                <div class="label">
                是否覆膜:
                </div>
                <el-select v-model="form.value.laminationFlag" class="m-2" placeholder="请选择" size="default">
                    <el-option
                    v-for="item in laminationOption"
                    :key="item.id"
                    :label="item.label" 
                    :value="item.id"
                    />
                </el-select>
            </div>
            
            
            
            </div>
            <template #footer>
            <span class="dialog-footer">
                <el-button :disabled="overFlag" @click="submit">提交</el-button>
                <el-button type="primary" @click="cancel">
                取消
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>       
<script lang="ts">
  import { post, get, } from "@/public/request/api";
  import { defineComponent,toRefs,computed, ref, reactive, onMounted, onUnmounted } from "vue";
  import { useRouter } from "vue-router";
  import { ElMessage } from 'element-plus'
  import moment from "moment";
  export default defineComponent({
    components: {},
    props:{
      plotList: Array,
    },
    setup(props,{emit}) {
      let overFlag=computed({
          get(){
            if(cropFlag.value){
              if(form.value.specialityArr.length>0&&
                form.value.cropsCategoryId&&
                form.value.cropsSubclassId&&
                form.value.cultivationPattern&&
                form.value.density&&
                form.value.irrigationRegime&&
                form.value.laminationFlag!==''&&
                form.value.maturationStage&&
                form.value.plotId&&
                form.value.purpose&&
                form.value.rowledge&&
                form.value.sowingTime
              ){
                return false
              }else{
                return true
              }
            }else{
              if(
                form.value.cropsCategoryId&&
                form.value.cropsSubclassId&&
                form.value.density&&
                form.value.rowledge&&
                form.value.laminationFlag!==''&&         
                form.value.plotId&&
                form.value.sowingTime
              ){
                return false
              }else{
                return true
              }
            }
          },
          set(value){
          }
      })
      //变量
      let cropFlag=ref(false)
      const state = reactive(props);
      const { plotList } = toRefs(state);
      let getPlotList=plotList
      
      
      const router = useRouter();
      let getPlot={
        id:router.currentRoute.value.query.id,
        plotName:router.currentRoute.value.query.name
      }
      let plotOptionList=reactive({
        value:[]
      })
      let cropsCategoryOptions=reactive({
        value:[]
      })
      let cropsSubclassOptions=reactive({
        value:[]
      })
      const specialityOption=reactive({
        value:[
          {
            value:'耐密性',
          },
          {
            value:'抗干旱',
          },
          {
            value:'抗病虫',
          },
        ]
      })
      const maturationOptionList=reactive([
        '早熟',
        '中熟',
        '晚熟'
      ])
      const modeOption=reactive([
        '套种',
        '非套种',
       
      ])
      const rankOption=reactive([
        '等行距',
        '宽窄距',
      ])
      const irrigationOption =reactive([
        '滴灌',
        '漫灌',
      ])
      const cropUseOption=reactive([
        '籽粒玉米',
        '青贮玉米',
        '鲜食玉米'
      ])
      const laminationOption=reactive([
        {
          id:0,
          label:'非覆膜'
        },
        {
          id:1,
          label:'覆膜'
        },
      ])
      const dialogVisible = ref(false);
      const form=reactive({
        value:{
          specialityArr:[],
            "speciality": "",
            "cropsCategoryId": '',
            "cropsSubclassId": '',
            "cultivationPattern": "",
            "density": '',
            "irrigationRegime": "",
            "laminationFlag": '',
            "maturationStage": "",
            "plotId": '',
            "purpose": "",
            "rowledge": "",
            "sowingTime": ""
        }
      
      })
      if(getPlot.id){
        plotOptionList.value=[getPlot]
        console.log('xxxx',plotOptionList.value); 
        form.value.plotId=getPlot.id.toString()
      }
      // 生命周期
      onMounted(() => {
        //
        getCropsCategoryOptions()
      });
  
      onUnmounted(() => {
        //
      });
  
      //methods
      function getCropsCategoryOptions(){
        get('/crops/cropsCategoryOptions',{
        }).then(res=>{
          console.log(123321);
          
          cropsCategoryOptions.value=res.data
        })
      }
      function getCropsSubclassOptions(id){
        get('/crops/cropsSubclassOptions',{
          cropsCategoryId:id
        }).then(res=>{
          cropsSubclassOptions.value=res.data
        })
      }
      function cateChangeHandle(e){
        let find=cropsCategoryOptions.value.find(item=>{
          return item.id==e
        })
        
        if(find.categoryName=='玉米'){
          cropFlag.value=true
        }else{
          cropFlag.value=false
        }
        form.value.cropsSubclassId=''
        getCropsSubclassOptions(e)
      }
      function submit(){
        form.value.speciality=form.value.specialityArr.join(',')
        form.value.sowingTime=moment(form.value.sowingTime).format("YYYY-MM-DD");
        post('/plant/add',form.value).then(res=>{
            ElMessage({
              message: '新增成功',
              type: 'success',
              })
            dialogVisible.value = false
            let find=cropsSubclassOptions.value.find(item=>{
              return item.id==form.value.cropsSubclassId
            })
            emit('updatePlant',{
              name:find.cropsSubclassName,
              time:form.value.sowingTime,
              md:form.value.density
            })
        }).catch(err=>{
            console.log('err',err);
            ElMessage.error(err.message)
        })
      }
      function cancel(){
        form.value={
            specialityArr:[],
            "speciality": "",
            "cropsCategoryId": '',
            "cropsSubclassId": '',
            "cultivationPattern": "",
            "density": '',
            "irrigationRegime": "",
            "laminationFlag": '',
            "maturationStage": "",
            "plotId": '',
            "purpose": "",
            "rowledge": "",
            "sowingTime": ""
        }
        dialogVisible.value = false
      }
      // return
      return {
        cancel,
        submit,
        overFlag,
        laminationOption,
        irrigationOption,
        rankOption,
        modeOption,
        maturationOptionList,
        specialityOption,
        cateChangeHandle,
        dialogVisible,
        form,
        plotOptionList,
        cropsCategoryOptions,
        cropsSubclassOptions,
        getPlotList,
        cropFlag,
        cropUseOption
      };
    },
  });
  </script>
    
    <style lang="scss">
  .m-2 {
    margin: 0 !important;
  }
  .planttime{
    .el-date-editor.el-input{
          width: 530px!important;
    }
  }
  
  .infowrap3 {
      .el-input__wrapper,.el-textarea__inner{
          background: rgba(255, 255, 255, 0.08);
         box-shadow: none!important;
      }
      .el-input.is-disabled .el-input__wrapper{
        background: rgba(255, 255, 255, 0.08);
      }
      
      
    .el-select .el-input__wrapper {
      width: 535px;
      border: none !important;
      height: 33px;
      background: rgba(255, 255, 255, 0.08);
    }
    .el-select--large {
      line-height: 30px !important;
      height: 30px !important;
    }
  }
  .leftselect {
    .el-select .el-input__wrapper {
      background: rgba(255, 255, 255, 0.08) !important;
      width: 200px;
      border-radius: 200px;
      border: none !important;
    }
  }
  .dydiv2 {
  .el-input__wrapper {
    border-radius: 0 !important;
  }
  .el-input-group__prepend,
  .el-input-group__append {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    box-shadow: none !important;
  }
  .el-input-group__prepend {
    // border-top-left-radius: 100px;
    // border-bottom-left-radius: 100px;
  }
  .el-input-group__append {
    // border-top-right-radius: 100px;
    // border-bottom-right-radius: 100px;
  }
}
  </style>
  
    <style lang="scss" scoped>
  @import "@/assets/scss/index.scss";
  .addwrap{
  .ah{
    color: #fff;
    margin-bottom: 20px;
    span{
      cursor: pointer;
      color: #097fe5;
    }
  }
}
  .zywrap{
      display: flex;
      .mcontent2{
          margin-right: 20px;
      }
  }
  .picset {
    display: flex;
    align-items: center;
    .remark{
  
    }
    .xgsmall {
      margin-right: 10px;
    }
    .add {
      border-radius: 5px;
      width: 130px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.08);
    }
  }
  .infowrap {
    .content4 {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
  
      .cchild {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 15px;
        padding: 20px;
        width: 24%;
        margin-top: 20px;
        margin-right: 10px;
        .big {
          font-size: 20px;
        }
        .p3 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .p3child {
            width: 49%;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .p3label {
              color: rgba(255, 255, 255, 0.6);
            }
            .num {
              font-weight: bold;
              font-size: 20px;
            }
          }
        }
        .p2 {
          display: flex;
          justify-content: space-around;
          .text {
            margin-left: 15px;
          }
          .p2left {
            display: flex;
            align-items: center;
            .name {
              font-weight: bold;
            }
            .label {
              color: rgba(255, 255, 255, 0.6);
              font-size: 14px;
            }
          }
          .zz {
            width: 60px;
            padding: 3px;
            background: #fff;
            border-radius: 300px;
          }
        }
        .p1 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          .pbtn {
            display: flex;
            align-items: center;
            .pbnt1 {
              background: rgba(9, 127, 229, 1);
              border-radius: 5px;
              font-size: 10px;
              padding: 2px 15px;
              box-sizing: border-box;
              cursor: pointer;
            }
            .pbnt2 {
              background: rgba(255, 255, 255, 0.16) !important;
              margin-left: 10px;
            }
          }
        }
      }
    }
  
    .panelben3 {
      margin-top: 20px;
    }
    .btnwrap {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      width: 400px;
  
      .btnc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 20px;
        padding: 10px 14px;
        margin-top: 10px;
        border-radius: 5px;
        background: rgba(9, 127, 229, 1);
        cursor: pointer;
      }
      .icon2 {
        width: 14px;
        margin-right: 6px;
      }
    }
  
    .content2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
    }
    .cc {
      display: flex;
      background: rgba(255, 255, 255, 0.08);
      flex-direction: column;
      padding: 15px;
      border-radius: 10px;
      width: 19%;
      .cct2 {
        display: flex;
        font-size: 30px;
        font-weight: bold;
        margin-top: 10px;
        align-items: center;
        .icon {
          width: 50px;
          margin-right: 12px;
        }
      }
    }
  }
  </style>
    